<template>
  <div class="app">
    <div class="shadow" v-show="shadowView">
      <i class="el-icon-loading" style="font-size: 50px;position:absolute;left: calc(50% - 25px);top:calc(50% - 25px)"></i>
    </div>
    <div class="box">
      <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" class="login-box">
        <el-form-item prop="username"><span class="inputTitle">账号</span>
          <el-input type="text" placeholder="请输入账号" v-model="form.username"/>
        </el-form-item>
        <el-form-item prop="password"><span class="inputTitle">密码</span>
          <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
        </el-form-item>
        <el-form-item prop="email" ><span class="inputTitle">Email:</span>
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model.number="form.code" placeholder="验证码:" style="width: 45%;margin-right: 3%;"></el-input>
          <el-button v-show="countShow" style="width: 45%;padding: 12px 0;font-size: 13px;float: right" @click="getCode('loginForm')">获取验证码</el-button>
          <el-button v-show="!countShow" style="width: 45%;padding: 12px 0;font-size: 13px;float: right" disabled>{{count}} s</el-button>
        </el-form-item>

        <el-form-item style="margin-top: 50px">
          <el-button type="primary" v-on:click="onSubmit('loginForm')" style="width: 100%">注册</el-button>
        </el-form-item>
        <router-link to="/login">
          <el-button type="text">去登陆</el-button>
        </router-link>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Register",
  data () {
    const checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      } else {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }
    };
    return {
      shadowView: false,
      countShow: true,
      count:'',
      timer:null,
      form: {
        username: '',
        password: '',
        email:"",
        code: ""
      },

      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      rules: {
        username: [
          {required: true, message: '用户名不可为空', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不可为空', trigger: 'blur'}
        ],
        email: [
          { validator: checkEmail, trigger: 'blur' }
        ],
        code:[
          { required: true, message: '年龄不能为空'},
          { type: 'number', message: '年龄必须为数字值'}
        ]
      },

      // 对话框显示和隐藏
      dialogVisible: false
    }
  },
  methods: {
    //提交
    onSubmit (formName) {
      // 为表单绑定验证功能
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let _this = this;
          this.shadowView = true
          axios.get("/register",{params: _this.form}).then(res => {
            this.$message.info(res.data)
            this.shadowView = false
            if (res.data=="注册成功"){
              this.$router.push("/login")
            }
          })
        } else {
          this.dialogVisible = true
          return false
        }
      })
    },
    codeSuccess(){
      this.$axios.get("/getCode?email="+this.form.email)
    },
    // 获取验证码
    async getCode(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 手机号等用户输入的信息校验成功后，开始倒计时
          const TIME_COUNT = 60;
          if (!this.timer) {
            this.count = TIME_COUNT;
            this.countShow = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--;
              } else {
                this.countShow = true;
                clearInterval(this.timer);
                this.timer = null;
              }
            }, 1000)
          }
          this.codeSuccess() // 调用接口获取验证码
        } else {
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
.shadow{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.3);
  position: absolute;
  z-index: 10;
}
.app{
  height: calc(100% - 2px);border: 1px solid white;
  position: relative;
}
.box{
  width: 300px;margin: 150px auto;
}
.inputTitle{
  color: #5C657E;
}
</style>
